import { FC, ReactNode } from "react";
import { Breadcrumb } from "antd";
import { HomeOutlined } from "@ant-design/icons";

export type BreadcrumbListProps = {
  list?: {
    href: string;
    icon?: ReactNode;
    label: string;
  }[];
};

const BreadcrumbList: FC<BreadcrumbListProps> = ({ list = [] }) => {
  if (!list) return null;
  return (
    <Breadcrumb className="my-[15px]">
      <Breadcrumb.Item href="/">
        <HomeOutlined />
      </Breadcrumb.Item>
      {list.map((item) => (
        <Breadcrumb.Item href={item.href} key={item.label}>
          {item.icon}
          <span>{item.label}</span>
        </Breadcrumb.Item>
      ))}
    </Breadcrumb>
  );
};
export default BreadcrumbList;
